<!-- 首页 -->
<script setup>
import { ref } from "vue";
import { onMounted } from "vue";
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from "@element-plus/icons-vue";
// 引入商品store
import { useCommodityStore } from "@/stores/commodity";
import { useCategoryStore } from "@/stores/category";
import router from "@/router";

const commodityStore = useCommodityStore();
const categoryStore = useCategoryStore();

// 监听事件
onMounted(() => {
    window.addEventListener("scroll", handleScroll);
});
// 屏幕滚动事件（自动添加商品列表），防抖动处理
const handleScroll = () => {
    let scrollTop = window.scrollY || document.documentElement.scrollTop;
    let windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    // 检查是否到达底部
    if (
        scrollTop + windowHeight >= documentHeight - 50 &&
        !commodityStore.loading
    ) {
        commodityStore.getOverview();
    }
};

// 轮播图
const banner = ref([
    {
        data: "src/assets/images/slider/slider13.png",
    },
    {
        data: "src/assets/images/slider/slider14.png",
    },
    {
        data: "src/assets/images/slider/slider15.png",
    },
]);

// 获取商品列表
const getCommodityList = async () => {
    commodityStore.clearList();
    commodityStore.getOverview();
};
getCommodityList();

// 导航栏跳转
const navigateTo = (path) => {
    // 清空store
    commodityStore.clearList();
    // 添加分类id到store
    commodityStore.categoryId = path;
    // 获取商品列表
    commodityStore.getOverview();
    router.push("/commodity/commodityList");
};
</script>


<template>
    <el-main class="commodity-main">
        <el-row :gutter="10">
            <!-- 商品索引导航栏 -->
            <el-col :span="4">
                <el-menu class="nav-bar" router>
                    <el-menu-item
                        v-for="item in categoryStore.categoryList"
                        :key="item.categoryId"
                        @click="navigateTo(item.categoryId)"
                    >
                        <el-icon><icon-menu /></el-icon>
                        <span>{{ item.categoryName }}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="20">
                <!-- 轮播图 -->
                <el-carousel class="commodity-carousel">
                    <el-carousel-item
                        class="commodity-carousel-item"
                        v-for="item in banner"
                        :key="item"
                    >
                        <img
                            class="commodity-carousel-item-picture"
                            :src="item.data"
                        />
                        <div class="commodity-carousel-text"></div>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>
        <!-- 推荐商品栏 -->
        <el-row class="recommend-commodity">
            <el-col :span="24" class="recommend-commodity-title">
                <text>推荐商品</text>
            </el-col>
            <el-col
                class="recommend-commodity-box"
                :span="6"
                v-for="item in commodityStore.overview"
                :key="item.id"
            >
                <router-link :to="`/commodity/Detail/${item.commodityId}`">
                    <el-card class="recommend-commodity-card" shadow="hover">
                        <img
                            class="recommend-commodity-card-picture"
                            :src="item.coverImage"
                        />
                        <div class="commodity-title">
                            {{ item.commodityTitle }}
                        </div>
                        <template #footer>
                            <div class="commodity-price">
                                {{ item.commodityPrice }}￥
                            </div>
                        </template>
                    </el-card>
                </router-link>
            </el-col>
        </el-row>
    </el-main>
</template>


<style scoped lang = "scss">
@import "@/assets/style/config.scss";
/* 全局下划线设置 */
* {
    text-decoration: none;
}

.commodity-main {
    width: 80%;
    margin: 0 auto;
}

.nav-bar {
    border: 1px solid #e4e4e4;
    box-shadow: #e4e4e4 0px 0px 10px;
    width: auto;
    border-radius: 15px;
}

.commodity-carousel {
    border-radius: 10px;
    height: 450px;
}

.commodity-carousel-text {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

.commodity-carousel-item {
    height: 450px;
}

.commodity-carousel-item-picture {
    width: 100%;
    height: 450px;
}

.recommend-commodity {
    width: 100%;
    margin-top: 50px;
}

.recommend-commodity-title {
    text-align: center;
    font-size: 30px;
}

.recommend-commodity-box {
    margin-top: 10px;
}

.recommend-commodity-card {
    width: 95%;
    border-radius: 10px;
}
.recommend-commodity-card:hover {
    box-shadow: 0 0 15px rgba(223, 45, 45, 0.3);
}

.commodity-title {
    max-height: 4em; /* 调整这个值以适应你的需要 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.commodity-price {
    font-size: 18px;
    color: rgb(211, 74, 74);
    text-align: right;
}

.recommend-commodity-card-picture {
    width: 100%;
}
</style>
